<template>
  <div id="course-management">
    <Form :model="form"
          class="form-wrap"
          label-position="left"
          :label-width="60">
      <div>
        <FormItem label="课程名称"
                  class="inputcommon">
          <Input v-model="form.courseName"
                 clearable></Input>
        </FormItem>
        <FormItem label="课程类型"
                  class="inputcommon">
          <Select v-model="form.courseType"
                  clearable
                  style="width:180px"
                  @on-change="roleChange">
            <Option v-for="item in options"
                    :value="item.value"
                    :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </div>
      <div>
        <FormItem label="创建时间段"
                  :label-width="80">
          <DatePicker type="daterange"
                      v-model="form.courseStartTime"
                      placeholder="选择时间范围"
                      style="width: 200px"></DatePicker>

        </FormItem>

        <Button type="primary"
                @click="getList">查询</Button>
        <Dropdown @on-click="selectCourse">
          <Button type="primary">
            创建课程
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem name="0">普通教学</DropdownItem>
            <DropdownItem name="1">案例联席</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <!-- <Button type="primary"
              @click="createCourse()">创建课程</Button> -->
      <!-- <Row>

            <Col span="24">
            <FormItem class="btn-wrap">
              
              
            </FormItem>
            </Col>
          </Row> -->
    </Form>
    <Table :loading="dataListLoading"
           border
           :columns="columns"
           :data="data"></Table>
    <div class="page">
      <Page @on-change="currentChangeHandle"
            :total="totalPage"
            :page-size="pageSize" />
    </div>
    <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getList"></add-or-update>
  </div>
</template>
<script>
import AddOrUpdate from './course-management-add-update2'
import { queryTeachingResultsManage, updateTeachingResultsManage, teacherDeleteTeachingResultsManage } from '@/api/management.js'
import { queryCourse } from '@/api/data.js'
import { mapState } from 'vuex'
import { dateFormat } from '@/libs/tools.js'

export default {
  data () {
    return {
      form: {
        courseName: '',
        courseStartTime: [],
        putinStatus: '',
        courseType: ''
      },
      columns: [
        {
          title: '课程名称',
          key: 'courseName',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.courseName)
            ])
          }
        },
        {
          title: '课程类型',
          key: 'typeName',
          width: 100
        },
        {
          title: '课程状态',
          key: 'statusName',
          width: 100,
        },
        {
          title: '创建时间',
          key: 'createTime',
          render: (h, params) => {
            return h('div', params.row.createTime ? params.row.createTime.slice(0, 19) : '')
          }
        },
        {
          title: '上课时间',
          key: 'courseStartTime',
          render: (h, params) => {
            return h('div', params.row.courseStartTime ? params.row.courseStartTime.slice(0, 19) : '')
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.courseId)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data: [
        {
          loginName: '管理',
          roleId: 1,
          roleName: '管理',
          password: '123',
          no: ''
        },
        {
          loginName: '张三',
          roleId: 2,
          roleName: '老师',
          password: '123',
          no: ''
        },
        {
          loginName: '李四',
          roleId: 4,
          roleName: '专家',
          password: '123',
          no: ''
        },
        {
          loginName: '王二',
          roleId: 3,
          roleName: '学生',
          password: '123',
          no: '三年二班'
        },
        {
          loginName: '狗蛋',
          roleId: 3,
          roleName: '学生',
          password: '123',
          name: '狗蛋',
          mobile: '13588889999',
          email: 'qq@qq.com',
          no: '三年三班'
        }
      ],
      options: [
        {
          value: 0,
          label: '普通教学'
        },
        {
          value: 1,
          label: '案例联席'
        },
      ],
      addOrUpdateVisible: false,
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false
    }
  },
  computed: {
    ...mapState({
      userId: state => state.user.userId,
      roleId: state => state.user.roleId
    }),
  },
  mounted () {
    this.getList()
    console.log(this.form.courseStartTime)
  },
  methods: {
    // 删除
    remove (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否对该课程进行删除操作</p>',
        loading: true,
        onOk: () => {
          teacherDeleteTeachingResultsManage(id).then(res => {
            if (res.data == 'success') {
              this.$Modal.remove()
              this.$Message.info('用户删除成功')
              this.getList()
            } else {
              this.$Message.info('用户删除失败')
            }
          })
        }
      })
    },
    // 新增 / 修改
    selectCourse (name, row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(name)
      })
    },
    // 获取表格数据
    getList () {
      const date = []
      // this.form.time.map(item => {
      //   if (item != '') {
      //     date.push(dateFormat(item))
      //   }
      // })
      this.dataListLoading = true
      const params = {
        userId: this.userId,
        roleId: this.roleId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        courseType: this.form.courseType,
        courseName: this.form.courseName,
        putinStatus: this.form.putinStatus,
        startDate: (this.form.courseStartTime[0] != "")? dateFormat(new Date(this.form.courseStartTime[0])) : '',
        endDate: (this.form.courseStartTime[1] != "") ? dateFormat(new Date(this.form.courseStartTime[1])) : ''
      }
      queryCourse(params).then(({ data }) => {
        if (data.rows.length > 0) {
          this.data = data.rows
          this.totalPage = data.total
        } else {
          this.data = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getList()
    },
    roleChange (value) {
      if (!value) {
        this.form.roleId = 0
      }
    },
    updateTeachingResultsManage (row) {
      let data = {
        videoId: row.videoId,
        putinStatus: row.putinStatus == '0' ? '1' : '0'
      }
      updateTeachingResultsManage(data).then((res) => {
        if (res.data == 'success') {
          this.$Message.success('修改成功')
          this.getList()
        }
      })
    },

  },
  watch: {},
  components: {
    AddOrUpdate
  }
}
</script>
<style lang="scss">
#course-management {
  width: 100%;
  height: 100%;
  .form-wrap {
    display: flex;
    justify-content: space-between;
    height: 90px;
    margin-bottom: 10px;
    .ivu-dropdown {
      height: 30px;
      button {
        height: 30px;
      }
    }
  }
  .inputcommon {
    .ivu-input-wrapper {
      width: 180px;
    }
  }
  .page {
    text-align: center;
    padding-top: 40px;
  }
  .btn-wrap {
    text-align: right;
  }
}
</style>
